To be able to edit code and run cells, you need to run the notebook yourself. Where would you like to run the notebook?

This notebook takes about 20 seconds to run.

In the cloud (experimental)

Binder is a free, open source service that runs scientific notebooks in the cloud! It will take a while, usually 2-7 minutes to get a session.

On your computer

(Recommended if you want to store your changes.)

  1. Copy the notebook URL:
  2. Run Pluto

    (Also see: How to install Julia and Pluto)

  3. Paste URL in the Open box

Frontmatter

If you are publishing this notebook on the web, you can set the parameters below to provide HTML metadata. This is useful for search engines and social media.

Author 1

Switching images depending on light/dark mode

Switch your screen between light and dark mode and watch this content automatically update!

One nice way to use this in Julia is to generate two plots in two color themes, and use this to make sure that the right one is displayed to the reader.

👀 Reading hidden code
310 μs
🌝
🌚
👀 Reading hidden code
lightdark(light_plot, dark_plot)
94.5 ms

You are in light mode!

You are in dark mode!

👀 Reading hidden code
lightdark(md"You are in **light** mode!", md"You are in **dark** mode!")
84.4 ms
👀 Reading hidden code
lightdark(["☀️","🍦","⭐️", 123], ["🛰️","💂","🎱"])
34.3 ms

Test images

👀 Reading hidden code
179 μs
big (generic function with 1 method)
big(x) = @htl """
<span style="font-size: 10rem;">$x</span>
"""
👀 Reading hidden code
461 ms
gerhARD
big("gerhARD")
👀 Reading hidden code
12.1 μs
🌚
dark_plot = big("🌚")
👀 Reading hidden code
13.0 μs
🌝
light_plot = big("🌝")
👀 Reading hidden code
13.1 μs

How it works

👀 Reading hidden code
183 μs
using HypertextLiteral
👀 Reading hidden code
27.3 ms
using PlutoUI
👀 Reading hidden code
178 ms
lightdark (generic function with 1 method)
lightdark(light, dark) = PlutoUI.ExperimentalLayout.Div([
@htl("""
<style>
.plutoui-only-when-light {
display: unset;
}
.plutoui-only-when-dark {
display: none;
}

@media (prefers-color-scheme: dark) {
.plutoui-only-when-light {
display: none;
}
.plutoui-only-when-dark {
display: unset;
}
}
</style>
"""),
PlutoUI.ExperimentalLayout.Div([light]; class="plutoui-only-when-light"),
PlutoUI.ExperimentalLayout.Div([dark]; class="plutoui-only-when-dark"),
])
👀 Reading hidden code
286 ms